<template>
  <div class="mainDiv my-div">
    <div class="rowHead" style="display: flex;height:100%">
      <el-collapse v-model="activeNames" style="width: 700px;height:100%;overflow-y: auto;overflow-x: hidden;" accordion>
        <el-collapse-item title="设置头部图片" name="1">
          <el-card :body-style="{ padding: '0px' }" style="width: 300px;margin: 0 auto;">
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeImg">
              <img v-if="imageUrl" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div style="padding: 14px;">
              <span>头部图片</span>
              <div class="bottom clearfix">
                <time style="font-size: 12px">图片大小为300px * 200px</time>
                <el-button type="primary" size="mini" style="float:right" @click="saveHead">保存</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="设置联系方式" name="2">
          <el-card :body-style="{ padding: '0px' }" style="width: 400px;margin: 0 auto;">
            <div style="width: 400px;height: 150px;background: #fff;border-radius: 5px;box-shadow: 0px 0px 10px 0px #c3c0c0;display:flex">
              <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeLogo" style="width: 100px;height:100px;padding: 25px;">
                <img v-if="logoUrl" :src="logoUrl" class="avatar-logo">
                <i v-else class="el-icon-plus avatar-uploader-icon-logo"></i>
              </el-upload>
              <div style="padding: 10px;width: 100%;">
                <p style="font-size: 16px; padding: 5px 0">
                  <el-input v-model="shopName" size="mini" placeholder="店铺名称"></el-input>
                </p>
                <p style="padding: 5px 0;font-size: 11px;color:rgb(115, 115, 115)">
                  <el-input type="textarea" size="mini" v-model="shopAddress" placeholder="店铺地址"></el-input>
                </p>
                <p style="padding: 5px 0; font-size: 12px">
                  <el-input v-model="shopPhone" size="mini" placeholder="联系电话"></el-input>
                </p>
              </div>
            </div>
            <div style="padding: 14px;">
              <span></span>
              <div class="bottom clearfix">
                <time style="font-size: 12px">logo大小为100px * 100px</time>
                <el-button type="primary" size="mini" style="float:right" @click="saveAddress">保存</el-button>
              </div>
            </div>
          </el-card>
        </el-collapse-item>
        <el-collapse-item title="设置页面内容" name="3">
          
          
          
          <el-card :body-style="{ padding: '0px' }" style="width: 375px;margin: 0 auto;">



          <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" style="height:100%">
          </quill-editor>






            <div style="padding: 14px;">
              <span>主题内容</span>
              <div class="bottom clearfix">
                <time style="font-size: 12px">呈现在首页部分</time>
                <el-button type="primary" size="mini" style="float:right" @click="saveBody">保存</el-button>
              </div>
            </div>
          </el-card>
          
          
          
          
          
        </el-collapse-item>
      </el-collapse>
      <div style="width: 50px"></div>
      <div>
        <div id="iphone">
          <div class="ql-container ql-snow" style="display:flex;flex-direction:column;">
            <div>
              <img v-if="imageUrl" :src="imageUrl" style="width: 100%; height: 200px">
              <i v-else class="el-icon-plus avatar-uploader-icon-bg"></i>
              <div style="width: 300px;height: 100px;position: absolute;top: 150px;left: 50%;background: #fff;border-radius: 5px;box-shadow: 0px 0px 10px 0px #c3c0c0;margin-left: -150px;display:flex;overflow: hidden;">
                <img v-if="logoUrl" :src="logoUrl" style="width: 100px; height: 100px">
                <i v-else class="el-icon-plus avatar-uploader-icon-logo"></i>
                <div style="padding: 10px">
                  <p style="font-size: 16px; padding: 5px 0">{{shopName}}</p>
                  <p style="padding: 5px 0;font-size: 11px;color:rgb(115, 115, 115)">{{shopAddress}}</p>
                  <p style="padding: 5px 0; font-size: 12px">{{shopPhone}}</p>
                </div>
              </div>
            </div>
            <div class="ql-editor" v-html="content" style="margin-top: 50px;"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// import C from '@/common/common.js'
import AdminEdit from '@/service/organization/adminEdit.js'
import * as qiniu from 'qiniu-js'
import C from '@/common/common.js'
import {
  quillEditor
} from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
const toolbarOptions = [
  ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block',
    {
      'list': 'ordered'
    },
    {
      'list': 'bullet'
    },
    {
      'indent': '-1'
    },
    {
      'indent': '+1'
    },
    {
      'align': []
    },
    {
      'size': ['small', false, 'large', 'huge']
    },
    {
      'header': [1, 2, 3, 4, 5, 6, false]
    },
    {
      'color': []
    },
    {
      'background': []
    }, 'link', 'image'], // toggled buttons
  ['clean'] // remove formatting button
]
export default {
  data () {
    let that = this
    return {
      imageUrl: '',
      logoUrl: '',
      imagefile: '',
      logoFile: '',
      shopName: '',
      shopAddress: '',
      shopPhone: '',
      loading: false,
      content: '',
      editorOption: {
        modules: {
          toolbar: {
            container: toolbarOptions, // 工具栏
            handlers: {
              'image': function (value) {
                if (value) {
                  // 打开图片窗口
                  const {
                    dialog
                  } = require('electron').remote
                  dialog.showOpenDialog({
                    filters: [{
                      name: 'Images',
                      extensions: ['jpg', 'jpeg', 'png', 'gif']
                    }]
                  }, async (files) => {
                    if (files) {
                      console.log(files)
                      const fs = require('fs')
                      let file = fs.readFileSync(files[0])
                      console.log(file)
                      file = new Blob([file])
                      console.log(file)
                      if (file.size / (1024 * 1024) > 2) {
                        that.$message.error('上传图片大于2M')
                        return false
                      }
                      let token = await AdminEdit.getToken({})
                      let name = files[0].split('\\').pop()
                      let keyName =
                        new Date().getFullYear() +
                        '/' +
                        (new Date().getMonth() + 1) +
                        '/' +
                        new Date().getDate() +
                        '/' +
                        name
                      let observable = qiniu.upload(file, keyName, token.uptoken)
                      observable.subscribe({
                        next (res) {
                          console.log(res)
                        },
                        error (err) {
                          if (err) {
                            console.log(err)
                          }
                          that.$message.error('上传失败！')
                        },
                        complete (res) {
                          console.log(res)
                          // 上传成功后开始提交表格
                          let asd = `http://odfb8y4in.bkt.clouddn.com/${res.key}`
                          // that.submitForm()
                          let quill = that.$refs.myQuillEditor.quill
                          let length = quill.getSelection().index
                          quill.insertEmbed(length, 'image', asd)
                          quill.setSelection(length + 1)
                        }
                      })
                    }
                  })
                } else {
                  this.quill.format('image', false)
                }
              }
            }
          }
        }
      },
      activeNames: ['1']
    }
  },
  async mounted () {
    let res = await C.ajax('/organization/xiaochengxu/getWeiXinConfig')
    console.log(res)
    this.imageUrl = res.indexbanner
    this.logoUrl = res.logoimg
    this.shopName = res.shopname
    this.shopAddress = res.shopaddress
    this.shopPhone = res.shopphone
    this.content = res.shopbody
  },
  methods: {
    async changeImg (file, fileList) {
      console.log(file)
      const isJPG =
          file.raw.type === 'image/jpeg' ||
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片格式错误!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
        return
      }
      this.imagefile = file
      this.imageUrl = file.url
    },
    async changeLogo (file, fileList) {
      console.log(file)
      const isJPG =
          file.raw.type === 'image/jpeg' ||
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif'
      const isLt2M = file.size / 1024 / 1024 < 1
      if (!isJPG) {
        this.$message.error('上传图片格式错误!')
        return
      }
      if (!isLt2M) {
        this.$message.error('上传图片大小不能超过 1MB!')
        return
      }
      this.logoFile = file
      this.logoUrl = file.url
    },
    onEditorChange ({
      quill,
      html,
      text
    }) {
      console.log('editor change!', quill, html, text)
      this.content = html
    },
    async saveHead () {
      let that = this
      if (this.imagefile.name) {
        // 开始获取上传的token
        let token = await AdminEdit.getToken({})
        let keyName =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate() +
            '/' +
            this.imagefile.name
        let observable = qiniu.upload(this.imagefile.raw, keyName, token.uptoken)
        observable.subscribe({
          next (res) {
            console.log(res)
          },
          error (err) {
            if (err) {
              console.log(err)
            }
            this.loading = false
            that.$message.error('上传失败！')
          },
          async complete (res) {
            console.log(res)
            // 上传成功后开始提交表格
            that.imageUrl = `http://pde4eshzp.bkt.clouddn.com/${res.key}`
            let data = {
              indexbanner: that.imageUrl
            }
            let resdata = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
            if (resdata) {
              that.$message.success(resdata.data)
            } else {
              that.$message.error(resdata.data)
            }
          }
        })
      }
    },
    async saveAddress () {
      let that = this
      if (this.logoFile.name) {
        // 开始获取上传的token
        let token = await AdminEdit.getToken({})
        let keyName =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate() +
            '/' +
            this.logoFile.name
        let observable = qiniu.upload(this.logoFile.raw, keyName, token.uptoken)
        observable.subscribe({
          next (res) {
            console.log(res)
          },
          error (err) {
            if (err) {
              console.log(err)
            }
            this.loading = false
            that.$message.error('上传失败！')
          },
          async complete (res) {
            console.log(res)
            // 上传成功后开始提交表格
            that.logoUrl = `http://pde4eshzp.bkt.clouddn.com/${res.key}`
            let data = {
              logoimg: that.logoUrl,
              shopname: that.shopName,
              shopaddress: that.shopAddress,
              shopphone: that.shopPhone
            }
            let resdata = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
            if (resdata) {
              that.$message.success(resdata.data)
            } else {
              that.$message.error(resdata.data)
            }
          }
        })
      } else {
        let data = {
          shopname: this.shopName,
          shopaddress: this.shopAddress,
          shopphone: this.shopPhone
        }
        let res = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
        if (res) {
          this.$message.success(res.data)
        } else {
          this.$message.error(res.data)
        }
      }
    },
    async saveBody () {
      let data = {
        shopbody: this.content
      }
      let res = await C.ajax('/organization/xiaochengxu/saveIndexBanner', data, 'post')
      if (res) {
        this.$message.success(res.data)
      } else {
        this.$message.error(res.data)
      }
    }
  },
  components: {
    quillEditor
  }
}
</script>

<style>
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 300px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar-uploader-icon-logo {
  font-size: 28px;
  color: #8c939d;
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
}
.avatar-uploader-icon-bg {
  font-size: 28px;
  color: #8c939d;
  width: 100%;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 300px;
  height: 200px;
  display: block;
}
.avatar-logo {
  width: 100px;
  height: 100px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.my-div {
  color: #000;
}
#iphone {
  width: 352px;
  height: 588px;
  position: relative;
  display: inline-block;
  border: 1px solid #000;
  border-radius: 40px;
  padding: 70px 10px;
  flex-shrink: 0;
}
#iphone:before {
  position: absolute;
  top: 30px;
  left: 50%;
  content: '';
  display: inline-block;
  width: 80px;
  height: 8px;
  margin-left: -40px;
  border: 1px solid #000;
  border-radius: 8px;
}
#iphone:after {
  position: absolute;
  left: 50%;
  bottom: 15px;
  content: '';
  display: block;
  width: 40px;
  height: 40px;
  margin-left: -20px;
  border: 1px solid #000;
  border-radius: 50%;
}
</style>
